<template>
  <div>
    <h2>{{name}}-{{age}}</h2>

    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script>
import { watch ,watchEffect,ref} from "vue";

export default {
  setup(){
    //watchEffect自动收集响应式的依赖
    const name = ref("wmy");
    const age = ref("18");

    watchEffect(() => {
      //默认在开始会执行一次，不用传参，自己会去找响应式对象
      console.log("name",name.value,"age",age.value);
    })

    const changeName = () => {
      name.value = "wj";
    }
    
    const changeAge = () => {
      age.value++;
    }
    
    return{
      name,
      age,
      changeName,
      changeAge
    }
  }
}
</script>

<style scoped>

</style>